<template>
  <div class="mainBox">
    <div class="routerMsg">{{ routerMsg }}</div>
    <div class="container">
      <!-- <div class="searchBox">
        <div class="search1">
          <el-input
            placeholder="请输入菜单名称"
            prefix-icon="el-icon-search"
            v-model="searchObj.targetName"
          >
          </el-input>
        </div>
        <div class="searchBtn">
          <el-button @click="searchList"> 查 询 </el-button>
        </div>
        <div class="searchBtn">
          <el-button class="reset" @click="resetSearch"> 重 置 </el-button>
        </div>
      </div> -->
      <div class="btnBox" v-permission="'menuManagementAdd'">
        <div class="addBtn">
          <el-button type="success" @click="addMenu('')"
            >添加菜单栏目</el-button
          >
        </div>
      </div>
      <div class="tableBox">
        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          :tree-props="{ children: 'menuList', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="id"
            label="序号"
            width="260"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="menuName"
            label="菜单名称"
            width="180"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="menuTypeName"
            label="菜单类型"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="path"
            label="路由地址"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="orderNum"
            label="排序值"
          >
          </el-table-column>
          <el-table-column
            width="200"
            align="center"
            prop="address"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                v-permission="'menuManagementEdit'"
                style="color: #269e8f"
                type="text"
                @click="addMenu(scope.row)"
                >编辑</el-button
              >
              <el-button
                v-permission="'menuManagementDel'"
                style="color: #f56c6c"
                type="text"
                @click="deleteCompany(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog
        :visible.sync="dialogVisible"
        width="1218px"
        :before-close="handleClose"
        :show-close="false"
        :append-to-body="true"
        custom-class="dialogCompany"
      >
        <div class="dialogTitle" slot="title">{{ dialogTitle }}</div>
        <div class="dialogForm">
          <el-form ref="form" :model="form" label-width="200px" :inline="true">
            <div class="formBox">
              <div class="formItem">
                <div class="left">
                  <el-form-item label="菜单名称">
                    <el-input
                      :disabled="seeForm"
                      placeholder="请输入"
                      v-model="form.menuName"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="right">
                  <el-form-item label="路由地址">
                    <el-input
                      :disabled="seeForm"
                      placeholder="请输入"
                      v-model="form.path"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="formItem">
                <div class="left">
                  <el-form-item label="父级页面">
                    <el-cascader
                      v-model="form.parentId"
                      placeholder="请选择"
                      :disabled="seeForm"
                      :options="allMenuList"
                      @change="handleChangeTree"
                      :props="{
                        key: 'id',
                        value: 'id',
                        label: 'menuName',
                        children: 'menuList',
                        checkStrictly: true,
                      }"
                    >
                    </el-cascader>
                  </el-form-item>
                </div>
                <div class="right">
                  <el-form-item label="排序值">
                    <el-input
                      size="medium"
                      placeholder="请输入"
                      v-model="form.orderNum"
                      :disabled="seeForm"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="formItem">
                <div class="left">
                  <el-form-item label="菜单类型">
                    <el-select
                      v-model="form.menuType"
                      placeholder="请选择"
                      :disabled="seeForm"
                    >
                      <el-option
                        v-for="item in menuTypeList"
                        :key="item.id"
                        :label="item.dictName"
                        :value="item.dictCode"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button
            :disabled="seeForm"
            class="leftCancel"
            type="primary"
            @click="submitForm"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  menuList,
  dict,
  menuAdd,
  menuEdit,
  menuDelete,
} from '@/api/systemManagement/menuManagement'
export default {
  name: 'menuManagement',
  props: {},
  components: {},
  data() {
    return {
      routerMsg: '',
      searchObj: {
        targetName: '',
        equipName: '',
      },
      tableData: [],
      emergency_scene_codeList: [],
      target_typeList: [],
      form: {
        menuName: '',
        path: '',
        parentId: '',
        orderNum: '',
        menuType: '',
      },
      dialogTitle: '添加菜单',
      dialogVisible: false,
      seeForm: false,
      industryCategoryList: [],
      menuTypeList: [],
      allMenuList: [],
    }
  },
  methods: {
    searchList() {},
    resetSearch() {},
    addMenu(row) {
      if (row) {
        this.dialogTitle = '编辑菜单'
        if (row.parentId === 0) {
          this.form = {
            ...row,
            parentId: [row.parentId],
          }
        } else {
          this.form = row
        }
      } else {
        this.dialogTitle = '新增菜单'
      }
      this.dialogVisible = true
    },
    deleteCompany(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await menuDelete({ id: row.id })
          if (res.data) {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
            this.getMenuList()
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    handleClose() {
      this.dialogVisible = false
      this.form = {
        menuName: '',
        path: '',
        parentId: '',
        orderNum: '',
        menuType: '',
      }
    },
    async submitForm() {
      // console.log(this.form)
      if (!this.form.id) {
        const obj = {
          parentId: this.form.parentId,
          menuName: this.form.menuName,
          path: this.form.path,
          orderNum: this.form.orderNum,
          menuType: this.form.menuType,
        }
        const res = await menuAdd(obj)
        this.handleFunction(res)
        this.handleClose()
      } else {
        const obj = {
          ...this.form,
        }
        const res = await menuEdit(obj)
        this.handleFunction(res)
        this.handleClose()
      }
    },
    async getMenuList() {
      const res = await menuList()
      this.tableData = res.data
      const menu = [{ id: 0, menuName: '主类目', menuList: [] }]
      menu[0].menuList = res.data
      this.changeKey(menu)
      this.allMenuList = menu
    },
    changeKey(arr) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].menuList.length) {
          this.changeKey(arr[i].menuList)
        } else {
          delete arr[i].menuList
        }
      }
    },
    async menuTypeDict() {
      const res = await dict({ dictType: 'menu_type' })
      this.menuTypeList = res.data
    },
    handleChangeTree(e) {
      this.form.parentId = e[e.length - 1]
    },
    handleFunction(res) {
      if (res.data) {
        this.$message.success('编辑成功')
        this.getMenuList()
      } else {
        this.$message.error(res.data)
      }
    },
  },
  created() {
    this.routerMsg = this.$route.meta.title
    this.getMenuList()
    this.menuTypeDict()
    // console.log(this.$store.getters.btnList);
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.routerMsg {
  padding: 20px;
  color: #999999;
  font-size: 14px;
}
.mainBox {
  width: 100%;
}

.container {
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 25px;
  .searchBox {
    display: flex;
    margin-bottom: 20px;
    .search1 {
      margin-right: 15px;
    }
    .searchBtn {
      .el-button {
        border: 1px solid #269e8f;
        color: #269e8f;
      }
      .reset {
        border: 1px solid #269e8f;
        color: #fff;
        background-color: #269e8f;
        margin-left: 20px;
      }
    }
  }
  .btnBox {
    display: flex;
    margin-bottom: 15px;
    .addBtn {
      margin-right: 20px;
      .el-button {
        background-color: #269e8f;
        border: 1px solid #269e8f;
      }
    }
  }
  .footerPage {
    padding-top: 20px;
    text-align: right;
    padding-right: 30px;
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #2aa59e !important; // 进行修改选中项背景和字体
      color: #fff;
    }
    .totalNum {
      font-size: 14px;
      font-weight: normal;
      margin-right: 10px;
    }
  }
}

.dialogTitle {
  text-align: center;
  border-bottom: 1px solid #d8d8d8;
  font-size: 20px;
  font-weight: 500;
  padding: 22px 0 19px 0;
}
::v-deep .el-dialog__header {
  padding: 0 30px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  .leftCancel {
    margin-left: 77px;
    background-color: #269e8f;
    border: 1px solid #269e8f;
  }
}
.dialogForm {
  .formBox {
    .formItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .left {
      width: 50%;
      height: 30px;
      line-height: 30px;
    }
    .right {
      width: 50%;
      height: 30px;
      line-height: 30px;
    }
    ::v-deep .el-input {
      height: 40px;
      width: 260px;
    }
    ::v-deep .el-input__inner {
      height: 40px;
    }
    ::v-deep .el-input__suffix {
      height: 40px;
    }
  }
}
::v-deep.dialogCompany {
  border-radius: 20px;
}
.tableBox {
  ::v-deep .el-table .el-table__cell {
    padding: 5px !important;
  }
}
</style>
